<template>
  <div class="common-layout">
    <el-form class="header" :model="queryParam" ref="queryRef" :inline="true">

      <el-form-item label="组号" prop="group">
        <el-input clearable v-model="groupNum"
                  style="width: 200px;"
                  placeholder="请输入组号(1-18)"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchByUnit">筛选</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="padding-left: 20px;padding-right: 20px">
        <el-table border :data="wordTestList">
          <el-table-column label="组号" width="120" align="center" prop="way"/>
          <el-table-column v-if="false" label="测试范围" width="80" align="center" prop="times">
            <template #default="scope">
              <dict-tag :options="word_test_scope" :value="scope.row.times"/>
            </template>
          </el-table-column>
          <el-table-column label="总数" align="center" prop="wordNum"/>
          <el-table-column label="完成个数" align="center" prop="complete"/>
          <el-table-column label="正确个数" align="center" prop="correctNum"/>
          <el-table-column label="正确率" align="center" prop="correctRate">
            <template #default="scope">
              <span>{{ parseInt(scope.row.correctRate * 100).toFixed(0)}}%</span>
            </template>
          </el-table-column>
          <el-table-column label="测试时间" width="180" align="center" prop="createTime"/>
          <el-table-column label="用时" align="center" prop="usedTime"/>
          <el-table-column label="详情" align="center" width="80" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link @click="getTestDetails(scope.row)" type="primary">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            style="margin-right: 20px"
            v-show="size > 0"
            :total="size"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleRecordData"
        />

      </el-col>
      <el-col v-if="false" :sm="24" :lg="24" style="padding-left: 20px;padding-right: 20px">
        <el-table
            v-loading="loading"
            :data="pageData"
            :default-sort="{ prop: 'updateTime', order: 'descending' }"
            border
            stripe
            highlight-current-row
        >
          <el-table-column v-if="false" type="selection" width="40" align="center"/>
          <el-table-column label="编号" v-if="false" width="210" prop="_id"/>
          <el-table-column label="书名" width="70" align="center" prop="book"/>
          <el-table-column label="课程" width="70" align="center" prop="unit"/>
          <el-table-column label="单词/词组" align="center" prop="name"/>
          <el-table-column label="中文名" align="center" prop="chinese"/>
          <el-table-column label="词性" width="60" align="center" prop="type"/>
          <el-table-column label="标识" width="80" align="center" prop="status">
            <template #default="scope">
              <dict-tag :options="word_study_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column v-if="false" label="排序" align="center" prop="number"/>
          <el-table-column label="最近学习时间" width="180" align="center" prop="updateTime"/>
        </el-table>

        <pagination
            style="margin-right: 20px"
            v-show="total > 0"
            :total="total"
            v-model:page="queryParam.pageNum"
            v-model:limit="queryParam.pageSize"
            @pagination=""
        />
      </el-col>
    </el-row>

    <el-dialog style="padding: 20px" title="测试结果" v-model="testResultWindow" width="900px" append-to-body>
      <el-row type="flex" justify="center">
        <el-text style="font-size: 18px;color: rebeccapurple">
          本次测试个数:{{ testCompleteNum }}---正确个数:{{correctNum}} ---正确率:{{testCompleteRate}}%
        </el-text>
      </el-row>
      <el-table :data="testCompleteData">
        <el-table-column label="单词/词组" align="center" prop="name"/>
        <el-table-column label="中文名" align="center" prop="chinese"/>
        <el-table-column label="词性" width="60" align="center" prop="type"/>
        <el-table-column label="测试结果" width="100" align="center" prop="result">
          <template #default="scope">
            <dict-tag :options="word_test_status" :value="scope.row.result"/>
          </template>
        </el-table-column>
        <el-table-column label="测试时间" width="180" align="center" prop="time"/>
      </el-table>

      <pagination
          style="margin-right: 20px"
          v-show="false"
          :total="testTotal"
          v-model:page="queryTest.pageNum"
          v-model:limit="queryTest.pageSize"
          @pagination=""
      />
    </el-dialog>
  </div>
</template>

<script setup>
// 查询
import {listTestPage} from "@/api/word/index.js";
import {getTestDetailsList} from "@/api/senior/index.js";
import {getCurrentInstance, ref} from 'vue';
import {listWordTestByUser} from "@/api/word/wordRecord.js";
import useUserStore from '@/store/modules/user'
let groupNum = ref()
const {proxy} = getCurrentInstance();
const {word_test_status} = proxy.useDict("word_test_status")
const {word_study_status} = proxy.useDict("word_study_status")
const {word_test_scope} = proxy.useDict("word_test_scope")

let testTimes = ref(1)
// 弹窗
let correctNum = ref(0)
let testTotal = ref(0)
let testCompleteNum = ref(0)
let testCompleteData = ref([])
let testCompleteRate = ref(0)
let testResultWindow = ref(false)

let queryParam = ref({
  unit: undefined,
  times: '1',
  userId: useUserStore().id,
  pageSize: 10
})

let queryTest = ref({
  pageNum: 1,
  pageSize: 10
})

let queryParams = ref({
  unit: undefined,
  book: undefined,
  pageNum: 1,
  userId: useUserStore().id,
  pageSize: 10
})

let wordTestList = ref([])
let pageData = ref([])
let total = ref(0)
let size = ref(0)
let loading = false

initPage()

function timesChange(times) {
  // console.log(times)
  if (times == null || times === '' || times === undefined) {
    testTimes.value = 1
    return
  }
  testTimes.value = times
}

//连接MYSQL数据库-查询全部
function handleRecordData() {
  // let queryForm = {'userId':useUserStore().id}
  // console.log(queryParams.value)
  listWordTestByUser(queryParam.value).then(res => {
    if (res.code === 200) {
      wordTestList.value = res.rows;
      size.value = res.total;
      // console.log(res)
    }
  })
}

function getTestDetails(row) {
  // console.log(row)
  if (row.practice === undefined || row.practice === null) {
    proxy.$modal.msgWarning("此记录详情未开放或已删除")
    return
  }
  correctNum.value = row.correctNum
  testCompleteNum.value = row.complete
  testCompleteRate.value = parseInt(row.correctRate * 100)
  let query = {
    practice : row.practice,
  }
  getTestDetailsList(query).then((res) => {
    if (res.code === 200) {
      // console.log(res)
      testResultWindow.value = true
      testCompleteData.value = res.data
      testTotal.value = res.data.length
    }
  })
}

function getPageData() {
  queryParam.value.pageNum = null
  listTestPage(queryParam.value).then((res) => {
    if (res.code === 200) {
      total.value = res.data.length
      // console.log(res);
    }
  })
}

function handleQuery() {
  // console.log(queryParam.value)
  listTestPage(queryParam.value).then((res) => {
    if (res.code === 200 && res.data !== undefined) {
      pageData.value = res.data
      // console.log(res)
    } else {
      pageData.value = []
    }
  })
}

function initPage() {
  let initQueryParam = {
    unit: undefined,
    book: undefined,
    userId: useUserStore().id,
    type: 'senior',
    pageNum: 1,
  }

  listWordTestByUser(initQueryParam).then(res => {
    if (res.code === 200) {
      wordTestList.value = res.rows;
      size.value = res.total;
      // console.log(res)
    }
  })
}

function resetQuery() {
  initPage()
}

function searchByUnit() {
  // queryParams.value.book =
  proxy.$modal.msg("查询的书名:" + queryParam.value.book + "  课程名称:" + queryParam.value.unit)
  handleRecordData()
  // handleQuery()
}

</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
